<template>
  <div class="asr-animation-container" @click="onClick">
    <v-icon
      v-if="!isLoading"
      name="device_microphone_line"
      size="20"
      remote
      v-tip:micMsg.hover
    ></v-icon>
    <div v-else class="mic-loading" v-tip:loadingMsg.hover>
      <div class="load"></div>
      <div class="load"></div>
      <div class="load"></div>
      <div class="load"></div>
    </div>
    <v-tip :disabled="isDisabled" ref="micMsg" size="small" placement="top"
      >语音输入（转文字）</v-tip
    >
    <v-tip :disabled="isDisabled" ref="loadingMsg" size="small" placement="top"
      >停止语音输入</v-tip
    >
  </div>
</template>

<script>
export default {
  name: "asr-animation",
  props: {
    isLoading: {
      type: Boolean,
      default: false,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isASRActive: false, // Renamed from isASR for clarity
      asrInstance: null, // To hold the ASR class instance
    };
  },
  methods: {
    onClick() {
      this.$emit("click");
    },
  },
};
</script>

<style lang="less" scoped>
.asr-animation-container {
  padding: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 20px;
  height: 20px;
  box-sizing: border-box;

  .mic-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    .load {
      width: 2px;
      height: 100%;
      background-color: var(--color-primary-normal);
      animation: 1s move6 infinite;
      border-radius: 1px; /* Adjusted for 2px width */
      margin: 0 1px; /* 0 top/bottom, 1px left/right for spacing */
    }

    .load:nth-child(1) {
      animation-delay: 0.2s;
    }

    .load:nth-child(2) {
      animation-delay: 0.4s;
    }

    .load:nth-child(3) {
      animation-delay: 0.6s;
    }

    @keyframes move6 {
      0% {
        height: 13%;
      }

      25% {
        height: 47%;
      }

      50% {
        height: 100%;
      }

      100% {
        height: 13%;
      }
    }
  }
}
</style>